<template>
    <div class="container">
        <div class="line" ref="line"></div>
        <div class="title">
            <span>▎</span>
            <select class="type" @change="getData($event.target.value)">
                <option v-for="item in options" :key="item.index" :value="item.key">{{ item.text }}</option>
            </select>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import http from '@/http'

const colorArr = ['rgba(11, 168, 44)', 'rgba(44, 110, 255)', 'rgba(22, 242, 217)', 'rgba(254, 33, 30)', 'rgba(250, 105, 0)']

export default {
    data() {
        return {
            options: [],
            chartLine: null,
            option: {
                color: colorArr,
                textStyle: {
                    color: '#aaa'
                },
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: 'rgba(0,0,0,.5)',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    },
                    textStyle: {
                        color: 'white'
                    }
                },
                legend: {
                    data: [],
                    icon: 'circle',
                    textStyle: {
                        color: 'white',
                        fontSize: 8
                    },
                    top: '15%'
                },
                grid: {
                    top: '30%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: [],
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: false
                    },
                    axisLine: {
                        show: true
                    }
                },
                series: []
            }
        }
    },
    methods: {
        async getData(type) {
            let ret = await http.get('/trend.json')
            // console.log(ret);
            this.options = ret.type
            this.option.xAxis.data = ret.common.month

            this.option.legend.data = ret[type].data.map(item => item.name)
            this.option.series = []
            ret[type].data.forEach((item, index) => {
                this.option.series.push(
                    {
                        name: item.name,
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: colorArr[index].replace(')', ',.5)')
                                },
                                {
                                    offset: 1,
                                    color: colorArr[index].replace(')', ',0)')
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: item.data
                    }
                )
            })

            this.chartLine.setOption(this.option)
        }
    },
    mounted() {
        this.chartLine = echarts.init(this.$refs.line)
        this.getData('map')
        window.addEventListener('resize', () => {
            this.chartLine.resize()
        })
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    position: relative;

    .line {
        height: 100%;
    }

    .title {
        position: absolute;
        top: 5%;
        left: 5%;
        display: flex;
        color: white;

        .type {
            border: none;
            background-color: #222733;
            color: white;
            outline: none;
        }
    }
}
</style>